<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>项目计划书 - 协同编辑</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: #f5f7fa;
        }
        .editor-container {
            display: flex;
            height: 100vh;
            overflow: hidden;
        }
        .main-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        .editor {
            flex: 1;
            padding: 2rem;
            background: white;
            overflow-y: auto;
        }
        .collaboration-panel {
            width: 300px;
            background: white;
            border-left: 1px solid #e2e8f0;
            overflow-y: auto;
        }
        .toolbar-item {
            padding: 0.5rem;
            border-radius: 0.375rem;
            cursor: pointer;
            transition: all 0.2s;
        }
        .toolbar-item:hover {
            background: #e2e8f0;
        }
        .user-cursor {
            display: inline-flex;
            align-items: center;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 12px;
            color: white;
            margin-right: 8px;
        }
        .comment-thread {
            border-left: 2px solid #4299e1;
            margin: 1rem 0;
            padding-left: 1rem;
        }
    </style>
</head>
<body>
    <div class="editor-container">
        <div class="main-content">
            <!-- 顶部导航 -->
            <div class="flex items-center justify-between p-4 border-b border-gray-200">
                <div class="flex items-center space-x-4">
                    <a href="prototype.html" class="text-gray-500 hover:text-gray-700">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
                        </svg>
                    </a>
                    <h1 class="text-xl font-bold">项目计划书</h1>
                    <span class="text-sm text-green-500">已保存</span>
                </div>
                <div class="flex items-center space-x-4">
                    <div class="flex -space-x-2">
                        <span class="user-cursor bg-blue-500">张三</span>
                        <span class="user-cursor bg-green-500">李四</span>
                        <span class="user-cursor bg-purple-500">王五</span>
                    </div>
                    <button class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition-colors">
                        分享
                    </button>
                </div>
            </div>

            <!-- 工具栏 -->
            <div class="flex items-center space-x-2 p-2 border-b border-gray-200 bg-gray-50">
                <div class="toolbar-item">
                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M13.293 3.293a1 1 0 011.414 0l2 2a1 1 0 010 1.414l-9 9a1 1 0 01-.39.242l-3 1a1 1 0 01-1.266-1.265l1-3a1 1 0 01.242-.391l9-9zM14 4l2 2-9 9-3 1 1-3 9-9z"/>
                    </svg>
                </div>
                <div class="toolbar-item font-bold">B</div>
                <div class="toolbar-item italic">I</div>
                <div class="toolbar-item underline">U</div>
                <div class="border-r border-gray-300 h-6"></div>
                <div class="toolbar-item">
                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M6 2a2 2 0 00-2 2v12a2 2 0 002 2h8a2 2 0 002-2V7.414A2 2 0 0015.414 6L12 2.586A2 2 0 0010.586 2H6zm5 6a1 1 0 10-2 0v3.586L7.707 10.293a1 1 0 10-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 11.586V8z"/>
                    </svg>
                </div>
                <div class="toolbar-item">
                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z"/>
                    </svg>
                </div>
            </div>

            <!-- 编辑器区域 -->
            <div class="editor" contenteditable="true">
                <h1 class="text-3xl font-bold mb-4">2024年度项目计划书</h1>
                <p class="mb-4">本计划书旨在概述公司2024年度的主要项目规划和目标。</p>
                <h2 class="text-2xl font-bold mb-3">一、项目背景</h2>
                <p class="mb-4">随着市场需求的不断变化，我们需要调整现有的产品策略，开发更符合用户需求的功能...</p>
                <div class="comment-thread">
                    <div class="bg-blue-50 p-3 rounded-lg">
                        <div class="flex items-center mb-2">
                            <span class="font-medium text-blue-600">张三</span>
                            <span class="text-sm text-gray-500 ml-2">1小时前</span>
                        </div>
                        <p class="text-gray-700">建议在这里补充一下具体的市场数据支持。</p>
                    </div>
                </div>
                <h2 class="text-2xl font-bold mb-3">二、项目目标</h2>
                <ul class="list-disc pl-6 mb-4">
                    <li class="mb-2">提升用户满意度达到95%以上</li>
                    <li class="mb-2">扩大市场份额至35%</li>
                    <li class="mb-2">优化产品性能，提升响应速度30%</li>
                </ul>
            </div>
        </div>

        <!-- 协作面板 -->
        <div class="collaboration-panel p-4">
            <div class="mb-6">
                <h3 class="text-lg font-bold mb-3">当前协作者</h3>
                <div class="space-y-3">
                    <div class="flex items-center">
                        <div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center text-white">张</div>
                        <span class="ml-2">张三（编辑中）</span>
                    </div>
                    <div class="flex items-center">
                        <div class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center text-white">李</div>
                        <span class="ml-2">李四（正在查看）</span>
                    </div>
                    <div class="flex items-center">
                        <div class="w-8 h-8 bg-purple-500 rounded-full flex items-center justify-center text-white">王</div>
                        <span class="ml-2">王五（正在查看）</span>
                    </div>
                </div>
            </div>

            <div class="mb-6">
                <h3 class="text-lg font-bold mb-3">文档大纲</h3>
                <div class="space-y-2">
                    <div class="text-blue-600 cursor-pointer">2024年度项目计划书</div>
                    <div class="pl-4 text-gray-600 cursor-pointer">一、项目背景</div>
                    <div class="pl-4 text-gray-600 cursor-pointer">二、项目目标</div>
                </div>
            </div>

            <div>
                <h3 class="text-lg font-bold mb-3">评论（4）</h3>
                <div class="space-y-4">
                    <div class="bg-gray-50 p-3 rounded-lg">
                        <div class="flex items-center mb-2">
                            <span class="font-medium">张三</span>
                            <span class="text-sm text-gray-500 ml-2">1小时前</span>
                        </div>
                        <p class="text-gray-700">建议在这里补充一下具体的市场数据支持。</p>
                    </div>
                    <div class="bg-gray-50 p-3 rounded-lg">
                        <div class="flex items-center mb-2">
                            <span class="font-medium">李四</span>
                            <span class="text-sm text-gray-500 ml-2">2小时前</span>
                        </div>
                        <p class="text-gray-700">同意张三的建议，我来补充相关数据。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 添加工具栏交互
        document.querySelectorAll('.toolbar-item').forEach(item => {
            item.addEventListener('click', () => {
                item.classList.toggle('bg-gray-200');
            });
        });

        // 模拟自动保存
        setInterval(() => {
            const saveStatus = document.querySelector('.text-green-500');
            saveStatus.textContent = '已保存';
        }, 2000);
    </script>
</body>
</html>